<template>
	<view class="page flex-col">
		<view class="list" v-if="constants.length>1" v-for="(item,i) in constants" :key="i" @click="toDetail(item)">
			<image class="list-avatar" :src="item.image" mode=""></image>
			<view class="list-info">
				<p>{{item.name}}</p>
				<p>{{item.tags}}</p>
			</view>
		</view>
		<view class="block_5 flex-col" v-else v-for="(item,i) in constants" :key="i">
			<view class="box_2 flex-row  flex at">
				<view class="block_1">
					<image :src="item.image" mode="widthFix"></image>
				</view>
				<view class="group_4 flex-col justify-between">
					<view class="text-wrapper_5 flex-row ">
						<view class="text_6" style="margin-right:30px;">{{item.name}}</view>
						<view class="text_7">{{item.job}}</view>
					</view>
					<!-- <text class="text_8">{{item.mobile}}</text> -->
					<text class="text_9">{{item.tags}}</text>
				</view>
			</view>
			<view class="text_10">
				<rich-text :nodes="item.content"></rich-text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: ['expert'],
		watch: {
			expert(e) {
				console.log(e, 21121212)

				this.constants = e
				console.log(this.constants)
			}
		},
		data() {
			return {
				constants: [],
			};
		},
		methods: {
			toDetail(e){
				uni.setStorageSync('zjDetail',e)
				uni.navigateTo({
					url:'/pages/finance/zjDetail'
				})
			}
		},
	};
</script>
<style scoped>
	.page {
		background-color: #f6f6f6;
		position: relative;
		/* width: 750rpx; */
		/* height: 1624rpx; */
		overflow: hidden;
	}

	.box_1 {
		background-color: rgba(255, 255, 255, 1);
		/* width: 750rpx; */
		/* height: 1624rpx; */
	}

	.section_1 {
		background-color: rgba(255, 255, 255, 1);
		/* height: 176rpx; */
		/* width: 750rpx; */
	}

	.block_3 {
		/* width: 679rpx; */
		/* height: 42rpx; */
		margin: 24rpx 0 0 35rpx;
	}

	.text_1 {
		width: 108rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(47, 95, 220, 1);
		font-size: 30rpx;
		letter-spacing: -0.6000000238418579rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
	}

	.label_1 {
		width: 34rpx;
		height: 21rpx;
		margin: 10rpx 0 0 437rpx;
	}

	.label_2 {
		width: 31rpx;
		height: 22rpx;
		margin: 10rpx 0 0 10rpx;
	}

	.label_3 {
		width: 49rpx;
		height: 24rpx;
		margin: 9rpx 0 0 10rpx;
	}

	.block_4 {
		width: 690rpx;
		height: 64rpx;
		margin: 34rpx 0 12rpx 30rpx;
	}

	.image_1 {
		width: 18rpx;
		height: 32rpx;
		margin-top: 14rpx;
	}

	.text_2 {
		width: 144rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 50rpx;
		margin: 5rpx 0 0 255rpx;
	}

	.image_2 {}

	.block_5 {
		background-color: #fff;
	}

	.group_1 {
		background-color: rgba(247, 247, 247, 1);
		width: 750rpx;
		height: 10rpx;
	}

	.text-wrapper_4 {
		width: 602rpx;
		height: 40rpx;
		margin: 30rpx 0 0 74rpx;
	}

	.text_3 {
		width: 112rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 40rpx;
	}

	.text_4 {
		width: 112rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(237, 134, 31, 1);
		font-size: 28rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: right;
		white-space: nowrap;
		line-height: 40rpx;
		margin-left: 133rpx;
	}

	.text_5 {
		width: 112rpx;
		height: 40rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 40rpx;
		margin-left: 133rpx;
	}

	.group_2 {
		background-color: rgba(237, 134, 31, 1);
		border-radius: 2rpx;
		width: 66rpx;
		height: 4rpx;
		margin: 12rpx 0 0 342rpx;
	}

	.box_2 {
		padding: 30rpx;
	}

	.block_1 {
		border-radius: 20rpx;
		width: 300rpx;
		height: 196rpx;
		overflow: hidden;
		/* background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/beb764db23a244478ee98ab273333edf_mergeImage.png); */
	}

	.block_1 image {
		width: 100%;
	}

	.group_4 {
		margin-top: 18rpx;
		margin-left: 20rpx;
	}

	.text-wrapper_5 {
		display: flex;
		align-items: center;
	}

	.text_6 {
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
	}

	.text_7 {
		color: rgba(102, 102, 102, 1);
		font-size: 30rpx;
	}

	.text_8 {
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		display: block;
		margin-top: 18rpx;
	}

	.text_9 {
		display: block;
		color: rgba(237, 134, 31, 1);
		font-size: 28rpx;
		margin-top: 18rpx;
	}

	.text_10 {
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: left;
		line-height: 44rpx;
		padding: 30rpx;
	}

	.text-wrapper_3 {
		height: 86rpx;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8cdb0dae03e0ca58685ed57feb0fc22cd1027157d8cd56d06429e6395015cfa2) 100% no-repeat;
		background-size: 100% 100%;
		width: 690rpx;
		margin: 294rpx 0 125rpx 30rpx;
	}

	.text_11 {
		width: 120rpx;
		height: 42rpx;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 30rpx;
		font-weight: normal;
		text-align: right;
		white-space: nowrap;
		line-height: 42rpx;
		margin: 22rpx 0 0 285rpx;
	}

	.image_3 {
		width: 750rpx;
		height: 68rpx;
		margin-top: -1rpx;
	}

	.list {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		margin: 20rpx 30rpx;
		background: #fff;
		border-radius: 20rpx;
	}

	.list-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.list-info {
		flex: 1;
	}

	.list-info p:nth-child(1) {
		font-size: 29rpx;
		font-weight: bold;
	}

	.list-info p:nth-child(2) {
		font-size: 26rpx;
	}
</style>